// ==UserScript==
// @name         A-soul视频推送插件
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  推送A-soul视频
// @author       tuntun
// @match        https://www.bilibili.com/
// @icon         https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// @require      file://E:/code/a-soul/index.js
// ==/UserScript==

(function() {
  'use strict';
  GM_addStyle(`
    @media (min-width: 1701px) and (max-width: 2559.9px) {
      .tuntun-grid {
        grid-template-columns: repeat(5,1fr);
      }
    }
    @media (min-width: 1367px) and (max-width: 1700.9px) {
      .tuntun-part {
        grid-column: span 5 !important;
      }
      .tuntun-card-body {
        grid-column: span 5 !important;
        grid-template-columns: repeat(5,1fr) !important;
      }
      .video-card-list.is-main .tuntun-card-body>*:nth-of-type(1n + 9) {
        display: block!important;
      }
    }
    @media (min-width: 1100px) and (max-width: 1366.9px) {
      .tuntun-part {
        grid-column: span 5 !important;
      }
      .tuntun-card-body {
        grid-column: span 5 !important;
        grid-template-columns: repeat(5,1fr) !important;
      }
      .video-card-list.is-main .tuntun-card-body>*:nth-of-type(1n + 9) {
        display: block!important;
      }
    }
    @media (max-width: 1099.9px) {
      .tuntun-part {
        grid-column: span 4 !important;
      }
      .tuntun-card-body {
        grid-column: span 4 !important;
        grid-template-columns: repeat(4,1fr) !important;
      }
      .video-card-list.is-main .tuntun-card-body>*:nth-of-type(7) {
        display: block!important;
      }
      .video-card-list.is-main .tuntun-card-body>*:nth-of-type(8) {
        display: block!important;
      }
    }
    .tuntun-setting-popover {
      width: 300px;
      // height: 200px;
      background-color: white;
      border-radius: 20px;
      position: absolute;
      left: -120px;
      top: 43px;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      transition: opacity 0.5s, height 0.25s;
    }

    .tuntun-setting-none {
      opacity: 0;
      height: 0;
      overflow: hidden;
    }

    .tuntun-setting-form {
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .tuntun-setting-btn {
      margin: 0 auto;
      width: 84px;
      height: 38px;
      background-color:#b8a6d9;
      border: none;
      border-radius:10px;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:17px;
      text-decoration:none;
      text-shadow:0px 0px 0px #9752cc;
    }
    .tuntun-setting-btn:hover {
      background-color:#bc80ea;
    }
    .tuntun-setting-btn:active {
      position:relative;
      top:1px;
    }

    .tuntun-setting-input {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

    .tuntun-setting-input div {
      margin-right: 10px
    }

    .tuntun-setting-input input,select{
      width: 200px;
      border: 1px solid #ccc;
      padding: 7px 0px;
      border-radius: 3px;
      padding-left: 5px;
      transition: border 0.25s
    }

    .tuntun-setting-input input:focus{
      outline: none;
      border: 1px solid #B8A6D9;
    }

    .tuntun-setting-input select:focus{
      outline: none;
      border: 1px solid #B8A6D9;
    }
    
    .tuntun-setting-imgRadius {
      padding-left: 0px !important;
    }
  `);

  const getTemplete = (videoKey, imgUrl = '') => {
    return `
    <section class="bili-grid tuntun-grid">
      <div class="video-card-list is-main tuntun-part">
        <div class="area-header" style="z-index: 1000;">
          <div class="left tuntun-part-left">
            <a id="A-soul分区" class="the-world area-anchor" data-id="8"></a>
            <img class="icon tuntun-part-img" src="${imgUrl}"></img>
            <a
              class="title"
              href="https://search.bilibili.com/all?keyword=${videoKey}"
              target="_blank"
              >
              <span>${videoKey}分区</span>
            </a>
          </div>
          <div class="right" style="position: relative;">
            <div id="tuntun-setting" style="position: relative;">
              <button class="primary-btn roll-btn">
                <span>设置</span></button
              >
              <div
                class="tuntun-setting-popover tuntun-setting-none"
              >
                <form class="tuntun-setting-form">
                  <div class="tuntun-setting-input">
                    <div>分区名称:</div>
                    <input type="text" name="name" />
                  </div>
                  <div class="tuntun-setting-input">
                    <div>分区图片:</div>
                    <input type="text" name="picUrl" />
                  </div>
                  <div class="tuntun-setting-input">
                    <div>图片圆角:</div>
                    <input class="tuntun-setting-imgRadius" type="range" min="0" max="50"/>
                  </div>
                  <div class="tuntun-setting-input">
                    <div>时间范围:</div>
                    <select name="timeRange" id="">
                      <option value="7">一周之内</option>
                      <option value="30" selected>一月之内</option>
                      <option value="90">三个月之内</option>
                      <option value="0">不限时间</option>
                    </select>
                  </div>
                  <input class="tuntun-setting-btn" type="submit" value="确认" />
                </form>
              </div>
            </div>
            <button id="refreshVideo" class="primary-btn roll-btn">
              <svg style="transform: rotate(0deg)">
                <use xlink:href="#widget-roll"></use></svg><span>换一换</span></button
            >
            <a
              class="primary-btn see-more tuntun-see-more"
              href="https://search.bilibili.com/all?keyword=${videoKey}"
              target="_blank"
              ><span>查看更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
          </div>
        </div>
        <div class="video-card-body tuntun-card-body">
        </div>
      </div>

      <!-- 
        <aside>
          <div class="aside-wrap">
            <div class="aside-head">
              <div class="area-header">
                <div class="left">
                  <a
                    class="title rank-title"
                    href="https://www.bilibili.com/v/virtual"
                    target="_blank"
                  ><span>排行榜</span></a>
                </div>
                <div class="right">
                  <a
                    class="primary-btn see-more"
                    href="https://www.bilibili.com/v/virtual"
                    target="_blank"
                    ><span>更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
                </div>
              </div>
            </div>
          </div>
        </aside>
      -->
    </section>
    `;
  };

  let asideBody = `
  <div class="aside-body">
          <div class="aside-core">
            <div class="bili-rank-list-video bili-rank-list-video__grid">
              <ul class="bili-rank-list-video__list video-rank-list">
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="1"
                      >1</span
                    ><a
                      href="//www.bilibili.com/video/BV1Hi4y1R7gy"
                      class="rank-video-card"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><div class="rank-video-card__image">
                        <picture class="v-img rank-video-card__cover"
                          ><!---->
                          <source
                            srcset="
                              //i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q.webp
                            "
                            type="image/webp" />
                          <img
                            src="//i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q"
                            alt="B站以前的LV6 VS 现在的LV6 2.0"
                            loading="lazy"
                            onload=""
                        /></picture>
                      </div>
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="B站以前的LV6 VS 现在的LV6 2.0"
                        >
                          B站以前的LV6 VS 现在的LV6 2.0
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="2"
                      >2</span
                    ><a
                      href="//www.bilibili.com/video/BV1Rb4y1Y7Pw"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）"
                        >
                          【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="3"
                      >3</span
                    ><a
                      href="//www.bilibili.com/video/BV1Z44y177Wt"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界"
                        >
                          小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="4"
                      >4</span
                    ><a
                      href="//www.bilibili.com/video/BV1mi4y1R7rT"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="准备好了么？来点刺激的！！！【嘉然】"
                        >
                          准备好了么？来点刺激的！！！【嘉然】
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="5"
                      >5</span
                    ><a
                      href="//www.bilibili.com/video/BV1VD4y1c788"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="顶上海鲜战争12分钟总集篇"
                        >
                          顶上海鲜战争12分钟总集篇
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="6"
                      >6</span
                    ><a
                      href="//www.bilibili.com/video/BV14r4y1S71X"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="【原神手书】荒泷一斗 【Misfit Lunatic】"
                        >
                          【原神手书】荒泷一斗 【Misfit Lunatic】
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="7"
                      >7</span
                    ><a
                      href="//www.bilibili.com/video/BV1jL411L7Vm"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="【平成三萌】摇起来迎接2022~~~~~~"
                        >
                          【平成三萌】摇起来迎接2022~~~~~~
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="8"
                      >8</span
                    ><a
                      href="//www.bilibili.com/video/BV1tY411p7G5"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="你瞧瞧现在哪儿有萌新啊"
                        >
                          你瞧瞧现在哪儿有萌新啊
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="9"
                      >9</span
                    ><a
                      href="//www.bilibili.com/video/BV1ji4y1R7LL"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="女生想让男朋友知道的事有哪些？"
                        >
                          女生想让男朋友知道的事有哪些？
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span
                      class="bili-rank-list-video__item--index"
                      data-index="10"
                      >10</span
                    ><a
                      href="//www.bilibili.com/video/BV12L4y1E7G2"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="看到朋友脱单我比si了还难受"
                        >
                          看到朋友脱单我比si了还难受
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
              </ul>
            </div>
            <!----><!---->
          </div>
    </div>`

  const Tool = {
    // 大数转万
    formatBigNumber: (num) => {
      return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
    },
    // 字符串转DOM
    s2d: (string) => {
      return new DOMParser().parseFromString(string, 'text/html').body
        .childNodes[0]
    },
    // 发布时间格式化
    diffTime: (time) => {
      let upDate = new Date(parseInt(time, 10) * 1000);
      let nowDate = new Date();
      let nowTime = nowDate.getTime(),
          upTime = upDate.getTime(),
          Day = 24 * 60 * 60 * 1000,
          Hours = 60 * 60 * 1000,
          Minutes = 60 * 1000,
          diffDay = parseInt((nowTime - upTime) / Day),
          diffHours = parseInt((nowTime - upTime) / Hours),
          diffMinutes = Math.floor((nowTime - upTime) / Minutes);
      if(diffDay != 0 && diffDay < 7) {
        if ( diffDay === 1 ) {
          return '昨天'
        }
        return diffDay + '天前';
      }
      else if(diffDay === 0 && diffHours != 0) {
        return diffHours + '小时前';
      }
      else if(diffDay === 0 && diffHours === 0 && diffMinutes != 0) {
        return diffMinutes + '分钟前';
      }
      else if (diffDay === 0 && diffHours === 0 && diffMinutes === 0) {
        return '刚刚';
      }
      else {
        let month = upDate.getMonth() + 1;
        let day = upDate.getDate();
        if (nowDate.getFullYear() !== upDate.getFullYear()) {
          return `${upDate.getFullYear()}-${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
        }
        return `${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
      }    
    },
    // 判断发布时间与现在时间是否过长
    isTimeTooLate: (time, rangeDay = 30) => {
      let day = parseInt(rangeDay, 10);
      if (day === 0) {
        return false;
      }
      let upData = new Date(parseInt(time, 10) * 1000);
      let nowTime = new Date().getTime(),
          upTime = upData.getTime(),
          Day = 24 * 60 * 60 * 1000,
          diffDay = parseInt((nowTime - upTime) / Day);
      if (diffDay > day) {
        return true;
      }
      return false;
    }
  }

  const API = {
    // 封装get方法
    Get: async (props) => {
      const { url: baseUrl, params = {} } = props;
      let pStr = Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join('&');
      let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getVideo: async (keyWord, page = 1) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/search/type',
          params: {
            search_type: 'video',
            keyword: keyWord,
            page: page,
          }
        });
        return res.result;
      } catch (error) {
        console.log('getVideo', error);
      }
    },
  }
  
  let videoList = [];
  let page = 1;
  let searchPage = 1;
  let bvList = [];
  let pageSize = 10;
  let videoKey = GM_getValue('videoKey', 'A-soul');
  let rangeDay = GM_getValue('rangeDay', '30');
  let imgBorderRadius = GM_getValue('imgBorderRadius', '15');
  let defaultImgUrl = 'https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg';
  let imgUrl = GM_getValue('imgUrl', defaultImgUrl);

  // 获取数据并渲染
  const getVideoCardTemplete = (data) => {
    let videoCardBody = document.querySelector('.video-card-body');
    videoCardBody.innerHTML = '';
    data.forEach((item, index) => {
      if (index < pageSize) {
        const {
          bvid, pic, mid,
          upic, author, play,
          like, duration, pubdate } = item;
        let title = item.title.replace(/<em class="keyword">(.*?)<\/em>/g, '$1');
        // let domStr = `
        // <div class="bili-video-card">
        //   <div class="bili-video-card__skeleton hide">
        //     <div class="bili-video-card__skeleton--cover"></div>
        //     <div class="bili-video-card__skeleton--info">
        //       <div class="bili-video-card__skeleton--face"></div>
        //       <div class="bili-video-card__skeleton--right">
        //         <p class="bili-video-card__skeleton--text"></p>
        //         <p class="bili-video-card__skeleton--text short"></p>
        //         <p class="bili-video-card__skeleton--light"></p>
        //       </div>
        //     </div>
        //   </div>
        //   <div class="bili-video-card__wrap __scale-wrap">
        //     <a
        //       href="//www.bilibili.com/video/${bvid}"
        //       target="_blank"
        //       data-mod="partition_recommend"
        //       data-idx="content"
        //       data-ext="click"
        //       ><div class="bili-video-card__image __scale-player-wrap">
        //         <div class="bili-video-card__image--wrap">
        //           <div class="bili-watch-later" style="display: none">
        //             <svg class="bili-watch-later__icon">
        //               <use xlink:href="#widget-watch-later"></use></svg><span
        //               class="bili-watch-later__tip"
        //               style="display: none"
        //             ></span>
        //           </div>
        //           <picture class="v-img bili-video-card__cover"
        //             ><!---->
        //             <source
        //               srcset="
        //                 ${pic}@672w_378h_1c_100q.webp
        //               "
        //               type="image/webp" />
        //             <img
        //               src="${pic}@672w_378h_1c_100q"
        //               alt="${title}"
        //               loading="lazy"
        //               onload=""
        //           /></picture>
        //           <div class="v-inline-player"></div>
        //         </div>
        //         <div class="bili-video-card__mask">
        //           <div class="bili-video-card__stats">
        //             <div class="bili-video-card__stats--left">
        //               <span class="bili-video-card__stats--item"
        //                 ><svg class="bili-video-card__stats--icon">
        //                   <use xlink:href="#widget-play-count"></use></svg><span class="bili-video-card__stats--text"
        //                   >${Tool.formatBigNumber(play)}</span
        //                 ></span
        //               ><span class="bili-video-card__stats--item"
        //                 ><svg class="bili-video-card__stats--icon">
        //                   <use xlink:href="#widget-agree"></use></svg><span class="bili-video-card__stats--text"
        //                   >${Tool.formatBigNumber(like)}</span
        //                 ></span
        //               >
        //             </div>
        //             <span class="bili-video-card__stats__duration">${duration}</span>
        //           </div>
        //         </div>
        //       </div></a
        //     >
        //     <div class="bili-video-card__info __scale-disable">
        //       <a
        //         href="//space.bilibili.com/${mid}"
        //         target="_blank"
        //         data-mod="partition_recommend"
        //         data-idx="content"
        //         data-ext="click"
        //         ><div class="v-avatar bili-video-card__avatar">
        //           <picture class="v-img v-avatar__face"
        //             ><!---->
        //             <source
        //               srcset="
        //                 ${upic.substr(5)}@72w_72h.webp
        //               "
        //               type="image/webp" />
        //             <img
        //               src="${upic.substr(5)}@72w_72h"
        //               alt="${author}"
        //               loading="lazy"
        //               onload="" /></picture
        //           ><!---->
        //         </div></a
        //       >
        //       <div class="bili-video-card__info--right">
        //         <a
        //           href="//www.bilibili.com/video/${bvid}"
        //           target="_blank"
        //           data-mod="partition_recommend"
        //           data-idx="content"
        //           data-ext="click"
        //           ><h3
        //             class="bili-video-card__info--tit"
        //             title="${title}"
        //           >
        //             ${title}
        //           </h3></a
        //         >
        //         <p class="bili-video-card__info--bottom">
        //           <a
        //             class="bili-video-card__info--owner"
        //             href="//space.bilibili.com/${mid}"
        //             target="_blank"
        //             data-mod="partition_recommend"
        //             data-idx="content"
        //             data-ext="click"
        //             ><span class="bili-video-card__info--author">${author}</span
        //             ><span class="bili-video-card__info--date"
        //               >· ${Tool.diffTime(pubdate)}</span
        //             ></a
        //           >
        //         </p>
        //       </div>
        //     </div>
        //   </div>
        // </div>
        // `;
        let domStr = `
          <div class="bili-video-card" data-report="partition_recommend.content">
            <div class="bili-video-card__skeleton hide">
              <div class="bili-video-card__skeleton--cover"></div>
              <div class="bili-video-card__skeleton--info">
                <div class="bili-video-card__skeleton--face"></div>
                <div class="bili-video-card__skeleton--right">
                  <p class="bili-video-card__skeleton--text"></p>
                  <p class="bili-video-card__skeleton--text short"></p>
                  <p class="bili-video-card__skeleton--light"></p>
                </div>
              </div>
            </div>
            <div class="bili-video-card__wrap __scale-wrap"><a href="//www.bilibili.com/video/${bvid}" target="_blank"
                data-mod="partition_recommend" data-idx="content" data-ext="click">
                <div class="bili-video-card__image __scale-player-wrap">
                  <div class="bili-video-card__image--wrap">
                    <div class="bili-watch-later" style="display: none;"><svg class="bili-watch-later__icon">
                        <use xlink:href="#widget-watch-later"></use>
                      </svg><span class="bili-watch-later__tip" style="display: none;"></span></div>
                    <picture class="v-img bili-video-card__cover">
                      <!---->
                      <source srcset="${pic}@672w_378h_1c.webp"
                        type="image/webp"><img
                        src="${pic}@672w_378h_1c"
                        alt="${title}" loading="lazy" onload="">
                    </picture>
                    <div class="v-inline-player"></div>
                  </div>
                  <div class="bili-video-card__mask">
                    <div class="bili-video-card__stats">
                      <div class="bili-video-card__stats--left"><span class="bili-video-card__stats--item"><svg
                            class="bili-video-card__stats--icon">
                            <use xlink:href="#widget-play-count"></use>
                          </svg><span class="bili-video-card__stats--text">${Tool.formatBigNumber(play)}</span></span><span
                          class="bili-video-card__stats--item"><svg class="bili-video-card__stats--icon">
                            <use xlink:href="#widget-agree"></use>
                          </svg><span class="bili-video-card__stats--text">${Tool.formatBigNumber(like)}</span></span></div><span
                        class="bili-video-card__stats__duration">${duration}</span>
                    </div>
                  </div>
                </div>
              </a>
              <div class="bili-video-card__info __scale-disable">
                <!---->
                <div class="bili-video-card__info--right"><a
                    href="https://www.bilibili.com/video/${bvid}"
                    target="_blank" data-mod="partition_recommend" data-idx="content" data-ext="click">
                    <h3 class="bili-video-card__info--tit" title="${title}">${title}</h3>
                  </a>
                  <p class="bili-video-card__info--bottom">
                    <!----><a class="bili-video-card__info--owner" href="//space.bilibili.com/${mid}" target="_blank"
                      data-mod="partition_recommend" data-idx="content" data-ext="click"><svg
                        class="bili-video-card__info--owner__up">
                        <use xlink:href="#widget-up"></use>
                      </svg><span class="bili-video-card__info--author">${author}</span><span class="bili-video-card__info--date">·
                      ${Tool.diffTime(pubdate)}</span></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        `;
        videoCardBody.appendChild(Tool.s2d(domStr));
      }
    });
  };

  // 更新视频
  const refreshVideo = async () => {
    let firstVideoIndex = (page - 1) * pageSize;
    let lastVideoIndex = firstVideoIndex + pageSize - 1;
    while(videoList.length < lastVideoIndex + 1) {
      let data = await API.getVideo(videoKey, searchPage);
      data.forEach((item) => {
        if (!Tool.isTimeTooLate(item.pubdate, rangeDay)) {
          if (bvList.indexOf(item.bvid) === -1) {
            videoList.push(item);
            bvList.push(item.bvid);
          }
        }
      });
      searchPage++;
    };
    page++;
    let applyData = videoList.slice(firstVideoIndex, lastVideoIndex + 1)
    getVideoCardTemplete(applyData);
  };

  // 填入框架
  let main = document.querySelector('.bili-layout');
  let gridAll = document.querySelectorAll('.bili-grid');
  if (main !== null) {
    let templete = getTemplete(videoKey, imgUrl);
    main.insertBefore(Tool.s2d(templete), gridAll[2]);

    // 第一次获取数据并渲染
    const applyFirstData = async () => {
      refreshVideo();
    };
    applyFirstData();
    // 换一换按钮添加更新视频事件
    let refreshVideoBtn = document.querySelector('#refreshVideo');
    refreshVideoBtn.addEventListener('click', refreshVideo);

    // popover
    const showpopover = (x, y) => {
      return `
      <div id="asoul-popover" style="position: absolute; z-index: 2000;  top: ${y}px; left: ${x}px;">
        <div class="v-popover is-top" style="padding-bottom: 0px; margin-left: 0px; pointer-events: none;">
          <div class="v-popover-content bili-rank-list-video">
            <div class="rank-video-card__popover">
              <div class="rank-video-card__popover--top">
                <div class="rank-video-card__image rank-video-card__popover--image">
                  <picture class="v-img rank-video-card__cover rank-video-card__popover--cover">
                    <!---->
                    <source srcset="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h.webp"
                      type="image/webp"><img
                      src="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h"
                      alt="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界" loading="lazy" onload="">
                  </picture>
                </div>
                <div class="rank-video-card__info rank-video-card__popover--info">
                  <h3 class="rank-video-card__popover--tit" title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界">小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
                  </h3>
                  <p class="rank-video-card__popover--author"><span>拜托了小翔哥</span><span> · 12-29</span></p>
                </div>
              </div>
              <ul class="rank-video-card__popover--stats">
                <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                    <use xlink:href="#widget-play-count"></use>
                  </svg><span>93万</span></li>
                <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                    <use xlink:href="#widget-danmaku"></use>
                  </svg><span>3931</span></li>
                <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                    <use xlink:href="#widget-favorite"></use>
                  </svg><span>1.3万</span></li>
                <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                    <use xlink:href="#widget-coin"></use>
                  </svg><span>7.6万</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      `
    }

    // 侧边
    // let aside = document.querySelector('.aside-wrap');
    // aside.append(Tool.s2d(asideBody));

    let setting = document.querySelector('#tuntun-setting');
    let settingBtn = setting.children[0];
    let settingPop = setting.children[1];
    let settingForm = settingPop.children[0];
    let partNameInput = settingForm.children[0].children[1];
    let partImgUrlInput = settingForm.children[1].children[1];
    let partImgDom = document.querySelector('.tuntun-part-img');
    partImgDom.style.borderRadius = `${imgBorderRadius}%`;
    let radiusRangeInput = document.querySelector('.tuntun-setting-imgRadius');
    let partTimeRangeInput = settingForm.children[3].children[1];

    // 设置按钮点击事件
    settingBtn.addEventListener('click', () => {
      if (settingPop.className === 'tuntun-setting-popover tuntun-setting-none') {
        settingPop.className = 'tuntun-setting-popover';
      } else {
        settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
      }
      partNameInput.value = videoKey;
      partImgUrlInput.value = imgUrl;
      partTimeRangeInput.value = rangeDay;
      radiusRangeInput.value = imgBorderRadius;
      partImgDom.style.borderRadius = `${imgBorderRadius}%`;
    });

    // videoKey改变
    const videoKeyChange = (newKey) => {
      let seeMoreBtn = document.querySelector('.tuntun-see-more');
      let headerLeft = document.querySelector('.tuntun-part-left');
      videoKey = newKey;
      videoList = [];
      page = 1;
      searchPage = 1;
      bvList = [];
      GM_setValue('videoKey', newKey);
      seeMoreBtn.href = `https://search.bilibili.com/all?keyword=${newKey}`;
      headerLeft.children[2].href = `https://search.bilibili.com/all?keyword=${newKey}`;
      headerLeft.children[2].children[0].innerHTML = `${newKey}分区`;
      refreshVideo();
    }

    // imgUrl改变
    const imgUrlChange = (newUrl) => {
      let partImgDom = document.querySelector('.tuntun-part-img');
      imgUrl = newUrl;
      GM_setValue('imgUrl', newUrl);
      partImgDom.src = newUrl;
    }

    // 设置img的圆角
    radiusRangeInput.addEventListener('change', () => {
      partImgDom.style.borderRadius = `${radiusRangeInput.value}%`;
    });
    const imgBorderRadiusChange = (newRadiusNum) => {
      imgBorderRadius = newRadiusNum;
      GM_setValue('imgBorderRadius', newRadiusNum);
    }

    // 时间范围改变
    const timeRangeChange = (timeRange) => {
      rangeDay = timeRange;
      videoList = [];
      page = 1;
      searchPage = 1;
      bvList = [];
      GM_setValue('rangeDay', timeRange);
      refreshVideo();
    }

    // 设置表单确认
    settingForm.addEventListener('submit', (e) => {
      e.preventDefault();
      if (partNameInput.value !== videoKey) {
        videoKeyChange(partNameInput.value);
      }
      if (partImgUrlInput.value !== imgUrl) {
        imgUrlChange(partImgUrlInput.value);
      }
      if (radiusRangeInput.value !== imgBorderRadius) {
        imgBorderRadiusChange(radiusRangeInput.value);
      }
      if (partTimeRangeInput.value !== rangeDay) {
        timeRangeChange(partTimeRangeInput.value);
      }
      settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
    });
  }
  
})();
